<template>
  <div id="gedan">
    <transition name="fade">
      <loading v-show="isLoading"></loading>
    </transition>
    <div class="content">
      <div class="info">
        <div class="img">
          <img v-lazy="coverUrl" alt="" />
        </div>
        <div class="dongtai">
          <div class="name">
            <span v-show="highQuality == true">精品歌单</span>
            <span>{{ coverName }}</span>
          </div>
          <div class="creator">
            <div class="creatorInfo">
              <img v-lazy="creatorUrl" alt="" />
              <div class="creatorName">{{ creatorName }}</div>
            </div>
            <div6 class="creatTime">
              <span>{{ createTime }}</span>
              <span>创建</span>
            </div6>
          </div>
          <div class="playAll">
            <i class=""></i>
          </div>
          <div class="shareAndCollect">
            <div class="playAll">
              <i class="playAllIcno" @click="playAllSongs"></i>
              <span>播放全部</span>
              <i class="collectAllIcno"></i>
            </div>
            <div class="collect">
              <img src="../assets/collect.png" class="collectIcno" />
              <span>收藏</span>
              <span>({{ collectCount }})</span>
            </div>

            <div class="share">
              <img class="collectIcno" src="../assets/share.png" />
              <span>分享</span>
              <span>({{ shareCount }})</span>
            </div>
          </div>
          <div class="fujia">
            <span>标签 : </span>
            <span class="tags">
              <span class="tag" v-for="(item, index) in tags" :key="index">
                {{ item }}
              </span>
            </span>
            <div class="countAndPlay">
              <div class="count">
                <span>歌曲 : </span>
                <span>{{ singCount }}</span>
              </div>
              <div class="playCount">
                <span>播放 : </span>
                <span>{{ playCount }}</span>
              </div>
            </div>
            <div class="description">
              <div>简介 :</div>
              <div class="des">{{ description }}</div>
              <i></i>
            </div>
          </div>
        </div>
      </div>
      <div class="singList" id="songTable">
        <div class="title">
          <div class="list">
            <table>
              <tr>
                <td></td>
                <td>标题</td>
                <td>歌手</td>
                <td>专辑</td>
              </tr>
              <tr
                v-for="(item, index) in allSongList"
                :key="index"
                @click="playSong(item, index)"
                @mouseover="songShow = index"
              >
                <td>
                  <span v-show="index < 9">0{{ index + 1 }}</span>
                  <span v-show="index >= 9">{{ index + 1 }}</span>
                </td>
                <td>
                  <span
                    :style="{
                      color: songShow === index ? 'rgb(255,165,0)' : '',
                    }"
                    >{{ item.name }}</span
                  >
                  <span v-show="item.alia.length != 0" style="color: #999">
                    ({{ item.alia[0] }})
                  </span>
                  <span v-show="item.mv != null" class="mv">mv</span>
                </td>
                <td>
                  <span
                    v-for="(nameItem, nameIndex) in item.ar"
                    :key="nameIndex"
                  >
                    {{ nameItem.name }}</span
                  >
                </td>
                <td>{{ item.al.name }}</td>
              </tr>
            </table>
          </div>
          <div class="load" v-show="loadShow == true">正在加载更多..</div>
        </div>
      </div>
    </div>
    <div class="hot"></div>
  </div>
</template>

<script>
import loading from "@/components/loading.vue";
export default {
  components: { loading },
  data() {
    return {
      isLoading: true,
      // 数据
      id: null,
      // 是否是精品歌单
      highQuality: false,
      // 歌单封面
      coverUrl: null,
      // 歌单名称
      coverName: null,
      // 创建者头像
      creatorUrl: null,
      // 创建者名称
      creatorName: null,
      // 创建时间
      createTime: null,
      // 收藏量
      collectCount: 0,
      // 分享量
      shareCount: 0,
      // 标签
      tags: null,
      // 歌曲量
      singCount: 0,
      // 播放量
      playCount: 0,
      // 简介
      description: null,
      // 全部歌曲列表
      allSongList: [],
      // 歌曲是否变色
      songShow: false,
      // 列表现在是第几页
      currentPage: 0,
      // 总共几页
      totalPage: 0,
      // 加载div是否显示
      loadShow: true,
      // 统共多少首歌
      allLength: 0,
      // alltracks
      alltracks: [],
    };
  },
  methods: {
    // 播放音乐
    playSong(item, index) {
      this.songShow = index;
      this.$axios({
        url: "/song/url",
        params: {
          id: item.id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        let data = {
          url,
          item,
        };
        this.$bus.$emit("get-src", data);
      });
    },

    // 传送歌单所有歌曲
    playAllSongs() {
      this.$bus.$emit("get-songsLists", this.allSongList);
    },

    // 点击加载
    loadTable() {
      if (this.allSongList.length < this.allLength) {
        this.currentPage++;
        this.loadShow = true;
        this.loadData();
      }
    },

    // 获取所有歌曲
    getMusicListDetail(ids) {
      this.$axios({
        url: "/song/detail",
        params: {
          ids: ids,
        },
      }).then((res) => {
        this.allSongList = res.data.songs;
        this.loadShow = false;
      });
    },

    loadData() {
      // 请求歌单所有歌曲
      this.$axios({
        url: "/playlist/detail",
        params: {
          id: this.id,
        },
      }).then((res) => {
        this.isLoading = false;
        this.allLength = res.data.playlist.trackIds.length;
        var time = new Date(res.data.playlist.createTime);
        this.highQuality = res.data.playlist.highQuality;
        this.coverUrl = res.data.playlist.coverImgUrl;
        this.coverName = res.data.playlist.name;
        this.creatorUrl = res.data.playlist.creator.avatarUrl;
        this.creatorName = res.data.playlist.creator.nickname;
        this.createTime =
          time.getFullYear(time) +
          "-" +
          time.getMonth(time) +
          "-" +
          time.getDate(time);
        this.collectCount = res.data.playlist.subscribedCount;
        this.shareCount = res.data.playlist.shareCount;
        this.tags = res.data.playlist.tags;
        this.singCount = res.data.playlist.trackCount;
        this.playCount = res.data.playlist.playCount;
        this.description = res.data.playlist.description;
        this.allSongList = res.data.playlist.tracks;
        this.alltracks = res.data.playlist.trackIds.map((item) => {
          return Number(item.id);
        });
        this.getMusicListDetail(this.alltracks.join(","));
      });
    },
  },
  // 在模板渲染成HTML前调用，初始化某些属性值，然后再渲染成视图
  created() {
    this.id = this.$route.query.id;
    // 请求歌单所有歌曲
    this.loadData();

    this.$axios({
      url: "/song/detail",
      params: {
        ids: this.alltracks,
      },
    }).then((res) => {});

    // 相似歌单
    this.$axios({
      url: "/simi/playlist",
    });
  },
};
</script>

<style scoped>
@import url("../css/gedanDetail");
</style>